<template>
  <div class="box">
    <van-nav-bar title="收货地址" left-arrow @click-left="onClickLeft" class="header">
      <template #right>
        <van-icon name="ellipsis" @click="showMark" />
      </template>
    </van-nav-bar>
    <van-overlay :show="show">
      <div class="wrapper" @click="closeMark">
        <div class="block">
          <div @click="goHome">
            <van-icon name="wap-home-o" class="block_icon" />
            <span>主页</span>
          </div>
          <div @click="goUser">
            <van-icon name="contact" class="block_icon" />
            <span>我的聚橙</span>
          </div>
        </div>
      </div>
    </van-overlay>
    <div class="wallet" v-if="!addreddList.length">
      <img src="https://m.juooo.com/static/img/ticket_empty.cf4b072.png" alt="">
      <p>还没有地址,快去添加吧</p>
    </div>
    <ul class="addredd_list" v-else>
      <li v-for="(item, index) in addreddList" :key="index">
        <div class="left">
          <h4>
            <span>{{item.name}}</span>
            <span>{{item.tel}}</span>
            <span v-if="item.isDefault" class="isDefault">默认</span>
          </h4>
          <p>{{item.province + item.city + item.county + item.addressDetail}}</p>
        </div>
        <div class="right">
          <van-icon name="edit" class="right_icon" @click="updataAddress(index)" />
          <van-icon name="delete" class="right_icon" @click="removeAddress(item)" />
        </div>
      </li>
    </ul>
    <div class="footer_btn">
      <button @click="goAddressAdd">+添加收获地址</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, NavBar, Overlay, Dialog, Toast } from 'vant'
import { getAddressData, removeAddress } from '@/api'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Dialog)
Vue.use(Overlay)
Vue.use(Toast)
export default {
  data () {
    return {
      show: false,
      addreddList: []
    }
  },
  mounted () {
    getAddressData({
      userid: localStorage.getItem('userid'),
      token: localStorage.getItem('token')
    }).then(res => {
      if (res.data.message === 'token验证失败') {
        Toast('您登录的用户信息已过期,请重新登录')
        localStorage.clear()
        setTimeout(() => {
          this.$router.replace('/login')
        }, 1000)
      } else {
        this.addreddList = res.data.data
      }
    })
  },
  methods: {
    showMark () {
      this.show = true
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    closeMark () {
      this.show = false
    },
    goHome () {
      this.$router.push('/home')
    },
    goUser () {
      if (localStorage.getItem('loginState') !== 'ok') {
        this.$router.push('/login')
      } else {
        this.$router.push('/user')
      }
    },
    goAddressAdd () {
      this.$router.push('/addressAdd')
    },
    removeAddress (item) {
      Dialog.confirm({
        title: '确认删除收货地址吗'
      }).then(() => {
        removeAddress({
          token: localStorage.getItem('token'),
          addressid: item.addressid
        }).then(res => {
          if (res.data.message === 'token验证失败') {
            Toast('您登录的用户信息已过期,请重新登录')
            localStorage.clear()
            setTimeout(() => {
              this.$router.replace('/login')
            }, 1000)
          } else {
            getAddressData({
              userid: localStorage.getItem('userid'),
              token: localStorage.getItem('token')
            }).then(res => {
              if (res.data.message === 'token验证失败') {
                Toast('您登录的用户信息已过期,请重新登录')
                localStorage.clear()
                setTimeout(() => {
                  this.$router.replace('/login')
                }, 1000)
              } else {
                this.addreddList = res.data.data
              }
            })
          }
        })
      }).catch(() => {
        // on cancel
      })
    },
    updataAddress (index) {
      // console.log(index)
      this.$router.push({ path: '/updataAddress', query: { index: index } })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 100;
  background: white!important;
}
.wrapper {
  display: flex;
  position: relative;
  height: 100%;
}
.block {
  width: 1.4rem;
  height: 0.9rem;
  position: absolute;
  top: 0.44rem;
  right: 0.05rem;
  border-radius: 0.05rem;
  background-color: #fff;
  div {
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    .block_icon {
      font-size: 0.2rem;
      margin: 0 0.13rem;
      float: left;
      margin-top: 0.1rem;
    }
    span {
      float: left;
    }
  }
  div:nth-of-type(1) {
    border-bottom: 1px solid #f2f2f2;
  }
}
.wallet {
  margin-top: 0.44rem;
  width: 100%;
  height: auto;
  img {
    width: 1.1rem;
    height: 0.77rem;
    display: block;
    margin: 1.4rem auto 0.22rem auto;
  }
  p {
    text-align: center;
    height: 0.18rem;
    line-height: 0.18rem;
    font-size: 0.12rem;
    color: #999999;
  }
}
.addredd_list {
  margin-top: 0.44rem;
  width: 100%;
  height: auto;
  padding: 0 0.15rem;
  li {
    width: 100%;
    height: 0.95rem;
    padding: 0.2rem 0.17rem;
    margin-top: 0.15rem;
    background: #f5f5f5;
    border-radius: 0.05rem;
    .left {
      width: 80%;
      height: 100%;
      float: left;
      h4 {
        height: 0.25rem;
        line-height: 0.25rem;
        font-size: 0.16rem;
        span:nth-of-type(1) {
          margin-right: 0.2rem;
        }
        .isDefault {
          height: 0.18rem;
          padding: 0 0.03rem;
          line-height: 0.18rem;
          font-size: 0.12rem;
          background: #ee0a24;
          border-radius: 0.09rem;
          margin-left: 0.02rem;
          color: #ffffff;
        }
      }
      p {
        width: 100%;
        height: 0.2rem;
        margin-top: 0.1rem;
        line-height: 0.2rem;
        color: #666666;
        font-size: 0.14rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
    .right {
      width: 20%;
      height: 100%;
      float: left;
      .right_icon {
        font-size: 0.2rem;
        line-height: 0.55rem;
        margin-left: 0.05rem;
      }
    }
  }
}
.footer_btn {
  width: 100%;
  height: 0.47rem;
  margin-bottom: 0.2rem;
  padding: 0 0.15rem;
  position: fixed;
  bottom: 0;
  z-index: 100;
  button {
    background: linear-gradient(#ff6742, #ff6742),linear-gradient(#ffde00, #ffde00);
    height: 0.47rem;
    line-height: 0.47rem;
    width: 100%;
    border: none;
    color: white;
    font-size: 0.18rem;
    border-radius: 0.26rem;
  }
}
/deep/ .van-nav-bar {
  border-bottom: 1px solid #ebebeb;
}
/deep/ .van-icon-ellipsis {
  font-size: 0.2rem;
  color: #232323;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.2rem;
  color: #666666;
}
</style>
